<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <!--        <base href="/" >-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <style>


        body, #app {
            height: 100vh;
            width: 100vw;
            margin: 0px;
            padding: 0px;
        }

        #dash_full  * {
            color: white;
        }
        #dash_full {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #header {
            position: relative;
            height: 6.6vh;
            overflow: hidden;
            margin-top: 1.5vh;
        }

        .logo-div {
            display: flex;
            position: absolute;
        }

        .logo_img {
            height: 3.6vh;
            margin: 1.5vh 25px;
        }

        .logo_title {
            margin: 1.2vh 0px 0px 0px;
            font-size: 2.6vh;
            color: rgb(72, 193, 1);
        }


        .header-title {
            text-align: center;
            font-size: 3.8vh;
            font-weight: 800;
            margin-top: 1.3vh;
            word-spacing: 10px;
        }

        .header-time {
            position: absolute;
            float: right;
            margin: 1.8vh 30px 0px 0px;
            font-size: 18px;
            top: 0px;
            right: 0px;
        }

        #container {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0;
            right: 0;
            background: url('./img/bg.png') 0 0 / 100vw 100vh no-repeat;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }


        #flexCon {
            height: 50vh;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            z-index: 9999;
            padding: 0px 22px;
        }

        .flex-left {
            -webkit-flex: 0 0 25%;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .flex-middle {
            -webkit-flex: 0 0 50%;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .flex-right {
            -webkit-flex: 0 0 25%;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }


        .flex-cell {
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            margin: 3px 0px;
        }

        .flex-cell-middle {
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        .flex-cell-1 {
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }


        .chart-wrapper {
            position: relative;
            height: 100%;
            background: url("./img/1_p1.png") 0 0 / 100% 100% no-repeat;
        }

        .chart-title {
            text-align: center;
            padding: 1.5vh;
            margin: 0px;
            font-size: 2vh;
        }

        .chart-div {
            position: absolute;
            top: 0px;
            bottom: 0;
            left: 0px;
            right: 0px;
            margin: 45px 0px 20px 0px;
        }


        .middel-div {
            margin-right: 10px;
            background: url("./img/1_p3.png") 0 0 / 100% 100% no-repeat;
            position: relative;
            margin: 10px 10px 10px 10px;
        }

        .h_idv {
            height: 13vh;
            width: 6.5vw;
            background: url('./img/h.png') 0 0 / 100% 100% no-repeat;
            margin: 0px auto;
            cursor: pointer;
            text-align: center;
        }

        .h_idv_v {
            font-size: 2vh;
            color: #01C2F9;
            padding-top: 25px;
        }

        .h_idv_t {

        }

        .footer {
            position: relative;
            height: 33.5vh;
            background: url(./img/1_p2.png) 0 0 / 100% 100% no-repeat;
            margin: 4px 22px;
        }

        .waring-table {
            width: 98%;
            font-size: 1.5vh;
            margin: 3px 20PX;
            text-align: center;

        }

        .waring-table thead {
            line-height: 3vh;
            background-color: rgba(255, 255, 255, 0.3);
        }

        .ctl_div {
            height: 5vh;
            position: relative;
        }

        .but {
            height: 4.2vh;
            width: 25vw;
            border: none;
            background: url(./img/but.png) 0 0 / 100% 100% no-repeat;
            color: white;
            margin-left: 38vw;
            margin-top: 0.5vh;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div id="dash_full">
            <div id="container">

            </div>
            <div id="header">
                  <span class="logo-div">
                    <img class="logo_img" src="./img/logo.png">
                    <H3 class="logo_title">绿库（上海）科技有限责任公司</H3>
                </span>
                <h3 class="header-title" @dblclick="handleFullScreen">AI信息化大屏</h3>
                <span class="header-time">{{ newDate }} {{ newTime }}   </span>
            </div>

            <div id="flexCon">
                <div class="flex-left">
                    <div class="flex-cell flex-cell-1">
                        <div class="chart-wrapper">
                            <h3 class="chart-title">每日用电耗/电费</h3>
                            <div class="chart-div" id="ech_1">
                            </div>
                        </div>
                    </div>
                    <div class="flex-cell flex-cell-1">
                        <div class="chart-wrapper">
                            <h3 class="chart-title">平均单位电耗/立方电耗</h3>
                            <div class="chart-div" id="ech_2">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-middle">
                    <el-row style="margin-top: 10px;">
                        <el-col :span="6">
                            <div class="h_idv">
                                <div class="h_idv_v">{{page.tady_pwc}}</div>
                                <div class="h_idv_t">今日电耗</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="h_idv">
                                <div class="h_idv_v">{{page.tady_wc}}</div>
                                <div class="h_idv_t">告警数量</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="h_idv">
                                <div class="h_idv_v">{{sysStatus?'运行':'停止'}}</div>
                                <div class="h_idv_t">AI控制</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="h_idv">
                                <div class="h_idv_v">{{page.sys_ctl}}</div>
                                <div class="h_idv_t">今日智控次数</div>
                            </div>
                        </el-col>
                    </el-row>

                    <div class="flex-cell flex-cell-middle middel-div">
                        <h3 class="chart-title">AI 控制</h3>
                        <div class="chart-div" id="ech_5">
                        </div>
                    </div>

                </div>
                <div class="flex-right">
                    <div class="flex-cell flex-cell-1" style="cursor: pointer">
                        <div class="chart-wrapper block1" @click="goAll()" style="cursor: pointer;">
                            <h3 class="chart-title">告警趋势</h3>
                            <div class="chart-div" id="ech_4">
                                <div class="chart-loader">
                                    <div class="loader"></div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="flex-cell flex-cell-1">
                        <div class="chart-wrapper block1">
                            <h3 class="chart-title">智控趋势</h3>
                            <div class="chart-div" id="ech_6"></div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="footer">
                <div class="chart-title"> 系统告警</div>
                <table class="waring-table">
                    <thead>
                    <tr>
                        <th style="width: 20%;">告警名称</th>
                        <th style="width: 10%;">状态</th>
                        <th style="width: 10%;">类型</th>
                        <th style="width: 10%;">等级</th>
                        <th style="width: 15%;">时间</th>
                        <th>AI分析</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-for="(item,index) in warList" :key="index">
                        <td>{{ item.title }}</td>
                        <td>{{ item.confirm == 1 ? '已确认' : '待确认'}}</td>
                        <td>{{ AlarmType[item.wartype||0].name }}</td>
                        <td>{{ AlarmLevel[item.level||0].name }}</td>
                        <td>{{ item.starttime }}</td>
                        <td>{{ item.analysismsg}}</td>
                    </tr>
                    <tr v-if="warList.length==0">
                        <td colspan="6" rowspan="3" style="text-align: center;line-height: 50px;">暂无告警</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="ctl_div">
                <button v-show="undefined!=sysStatus" class="but" @click="showdig()"> {{sysStatus?'停止':'运行' }}
                </button>
            </div>

        </div>
    </template>
</div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/ev.js"></script>

<script>


    let app = new Vue({
            el: '#app',
            data() {
                return {
                    mid: 0,
                    url: "https://v2.cold360.cn/cloud360-web/",
                    timer: undefined,
              

                    newDate: '',
                    newTime: '',
                    warList: [],
                    AlarmType: {
                        0: {id: '0', name: '温度告警', style: 'warning-row'},
                        1: {id: '1', name: '运管告警', style: 'success-row'},
                        2: {id: '2', name: '制冷告警', style: 'warning-row'},
                        3: {id: '3', name: '设备故障', style: 'success-row'},
                        4: {id: '4', name: '其他告警', style: 'success-row'},
                        5: {id: '5', name: '场景联动', style: 'success-row'},
                        6: {id: '6', name: '自定义告警', style: 'success-row'},
                        7: {id: '7', name: '预警', style: 'success-row'},
                    },
                    AlarmLevel: {
                        2: {id: '2', name: '普通告警', style: 'ant-tag-lime'},
                        1: {id: '1', name: '严重告警', style: 'ant-tag-orange'},
                        0: {id: '0', name: '紧急告警', style: 'ant-tag-red'}
                    },
                    fullscreen: false,
                    sysStatus: undefined,
                    timecount: 0,

                    respwddigShow: false,
                    userInfo: {
                        password: '',
                    },
                    checkpwd: {
                        password: [{
                            required: true,
                            min: 6,
                            max: 25,
                            message: '长度6~25位',
                            trigger: 'blur'
                        }],
                    },

                    socket: "",

                    page: {
                        tady_pwc: 0,
                        tady_wc: 0,
                        sys_status: 0,
                        sys_ctl: 0
                    }

                };
            },
            mounted() {
                window.token = this.token();
                axios.defaults.headers.common["Authorization"] = "Bearer " + this.token();
                this.init()
            },
            beforeDestroy() {
                if (this.timer) {
                    clearInterval(this.timer);
                }
            },
            methods: {
                init: function () {
                    Promise.all([this.init_base()]).then(() => {
                        this.timer = setInterval(() => {
                            this.getNowTime(); //每隔一秒会再次更新时间
                            
                            // 每天凌晨00:00调用refday，节省开支
                            let date = new Date();
                            let currentDate = date.toDateString(); // 获取日期字符串，忽略时间
                            // 只在日期变化且时间为00:00时调用，避免每秒检查
                            if (date.getHours() === 0 && date.getMinutes() === 0) {
                                this.refday();
                            }
                            
                            this.timecount++;
                            if (this.timecount >= 3600) {
                                this.timecount = 0;
                                this.refdata();
                            }

                        }, 1000);
                        if(this.mid>0){
                            this.init_data();
                            this.init_topdata();
                            this.init_pwc();
                            this.init_apvp();
                            this.init_war_trend();
                            this.init_war_data();
                        }


                    });
                },

                getNowTime() {
                    let date = new Date();
                    this.newDate = [date.getFullYear(), "年", (date.getMonth() + 1), "月", date.getDate(), "日"].join("");
                    this.newTime = [date.getHours(), "时", date.getMinutes(), "分", date.getSeconds(), "秒"].join("");
                },

                refdata() {
                   if(0==this.mid)return;
                    this.init_topdata();
                    this.init_sismt_data();
                    this.init_war_data();
                },
                refday(){
                 this.init_pwc();
                 this.init_apvp();
                 this.init_war_trend();
                 this.init_war_data();
                 this.init_sis_data();
                },

                async init_base() {
                    let res = await axios.get('api/sys/mid/' + this.token(), {}, {withCredentials: true})
                    let rs = res.data;
                    if (200 == rs.code) {
                        this.mid = rs.data;
                        if (this.mid == 0) {
                            setTimeout(() => {
                                this.init();
                            }, 5000);
                        }
                    }
                },
                init_pwc() {
                    const formData = new FormData();
                    formData.append('keys', ['0_0_' + this.mid + '_pw', '0_0_' + this.mid + '_pr']);
                    formData.append('time', 15);
                    axios.post(this.url + 'na_monitor/getSisValueByKey', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
                        this.load_ech_1(res.data);
                    })
                },
                init_apvp() {
                    const formData = new FormData();
                    formData.append('keys', ['0_0_' + this.mid + '_ap', '0_0_' + this.mid + '_vp']);
                    formData.append('time', 15);
                    axios.post(this.url + 'na_monitor/getSisValueByKey', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
                        this.load_ech_2(res.data);
                    })
                },
                init_war_trend() {
                    const formData = new FormData();
                    formData.append('keys', ['0_0_' + this.mid + '_ac']);
                    formData.append('time', 15);
                    axios.post(this.url + 'na_monitor/getSisValueByKey', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
                        this.load_ech_4(res.data);
                    })
                },

                init_war_data() {
                    axios.get(this.url + 'na_monitor/getPMMTAlerts?mid=' + this.mid).then(res => {
                        this.warList = res.data.ad;
                        this.page.tady_wc = res.data.at || 0;
                    })
                },
                init_sis_data() {
                    const formData = new FormData();
                    formData.append('keys', ['ck']);
                    formData.append('time', 15);
                    axios.post('api/sys/sisdata/' + this.token(), formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
                        this.load_ech_5(res.data)
                    })
                },
                init_sismt_data() {
                    const formData = new FormData();
                    formData.append('queryday', 5);
                    axios.post('api/sys/ctlData/' + this.token(), formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
                        this.load_ech_6(res.data)
                    })
                },

                init_topdata() {
                    axios.get(this.url + 'na_electric/today?mid=' + this.mid).then(res => {
                        this.page.tady_pwc = res.data;
                    });
                    axios.get('api/sys/ctlcount/' + this.token(), {params: {}}, {withCredentials: true}).then(res => {
                        let rs = res.data;
                        if (200 == rs.code) {
                            this.page.sys_ctl = rs.data;
                        } else {
                            this.page.sys_ctl = 0;
                        }
                    });
                },


                init_data() {
                    axios.get('api/sys/status/' + this.token(), {params: {}}, {withCredentials: true}).then(res => {
                        let rs = res.data;
                        if (200 == rs.code) {
                            this.sysStatus = rs.data;
                        } else {
                            this.sysStatus = undefined;
                        }
                    });

                },
                showdig() {
                    let newstatus = !this.sysStatus, toke = this.token();
                    this.$prompt('请输入控制密码', ('确认要' + (newstatus ? '启动' : '停止') + '智控系统吗？'), {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^.{6,}$/,
                        inputErrorMessage: '请输入正确的密码'
                    }).then(({value}) => {
                        axios.post('api/sys/status/' + [newstatus, value, toke].join("/"), {withCredentials: true}).then(res => {
                            let rs = res.data;
                            if (rs.code == 200) {
                                this.sysStatus = rs.data;
                                this.$message.success((this.sysStatus ? "启动" : "停止") + "成功！");
                            } else {
                                this.$message.error(rs.msg)
                            }
                        })
                    }).catch(() => {
                    });

                },

                open: function () {
                    console.log("socket连接成功")
                },
                error: function () {
                    console.log("连接错误")
                },
                getMessage: function (msg) {
                    // console.log("getMessage:" + msg.data)
                    this.simulationDTOList = JSON.parse(msg.data);
                },
                send: function () {
                    this.socket.send(params)
                },
                close: function () {
                    console.log("socket已经关闭")
                },
                token(salt) {
                    let time = new Date().getTime() + '', code = salt ? time.substr(-3) + salt.substr(-1) : time.substr(-4),
                        r = (code * 33 - 11) * 22;
                    return code + '' + r;
                },

                handleFullScreen() {
                    let element = document.getElementById("app");
                    if (this.fullscreen) {
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        } else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen();
                        } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                    } else {
                        if (element.requestFullscreen) {
                            element.requestFullscreen();
                        } else if (element.webkitRequestFullScreen) {
                            element.webkitRequestFullScreen();
                        } else if (element.mozRequestFullScreen) {
                            element.mozRequestFullScreen();
                        } else if (element.msRequestFullscreen) {
                            // IE11
                            element.msRequestFullscreen();
                        }
                    }
                    this.fullscreen = !this.fullscreen;
                },

                load_ech_1(data) {
                    let oper = {
                        showToolbox: false,
                        format: 'MM-dd',
                        yAxis: [{
                            type: "value",
                            name: "电量(Kw·h)",
                            nameTextStyle: {color: "#058cff"},
                            splitLine: {show: false},
                            axisLabel: {textStyle: {color: "#058cff"}},
                        }
                        ]
                    };
                    let series = [
                        {name: '电量', type: 'line', data: data['0_0_' + this.mid + '_pw'], unit: 'kw.h', gradient: true},
                        {name: '电费', type: 'bar', data: data['0_0_' + this.mid + '_pr'], unit: '元', gradient: true},
                    ];
                    TIMECHART('ech_1', null, series, ['KW·h', '元', '℃', '元/kW·h'], oper);

                },

                load_ech_2(data) {
                    let oper = {
                        showToolbox: false,
                        format: 'MM-dd',
                        yAxis: [{
                            type: "value",
                            name: "元",
                            nameTextStyle: {color: "#058cff"},
                            splitLine: {show: false},
                            axisLabel: {textStyle: {color: "#058cff"}},
                        }
                        ]
                    };
                    let series = [
                        {name: '单位电耗', type: 'line', data: data['0_0_' + this.mid + '_ap'], unit: '元/㎡', color: '#01C2F9'},
                        {name: '立方电耗', type: 'line', data: data['0_0_' + this.mid + '_vp'], unit: '元/m³', color: '#ED561B'},
                    ];
                    TIMECHART('ech_2', null, series, ['元', '元', '℃', '元/kW·h'], oper);
                },

                load_ech_4(data) {
                    let oper = {
                        showToolbox: false,
                        format: 'MM-dd',
                        yAxis: [{
                            type: "value",
                            name: "个",
                            nameTextStyle: {color: "#ef5350"},
                            splitLine: {lineStyle: {opacity: 0.3}},
                            axisLabel: {textStyle: {color: "#ef5350"}},
                        }
                        ]
                    };
                    let series = [{
                        name: '告警数量',
                        type: 'line',
                        data: data['0_0_' + this.mid + '_ac'],
                        unit: '个',
                        color: '#ef5350'
                    }];
                    TIMECHART('ech_4', null, series, ['个'], oper);
                },
                load_ech_5(data) {
                    let oper = {
                        showToolbox: false,
                        format: 'MM-dd',
                        yAxis: [{
                            type: "value",
                            name: "个",
                            nameTextStyle: {color: "#12e78c"},
                            splitLine: {lineStyle: {opacity: 0.3}},
                            axisLabel: {textStyle: {color: "#12e78c"}},
                        }
                        ]
                    };
                    let series = [{
                        name: '次数',
                        type: 'line',
                        data: data['ck'],
                        unit: '个',
                        color: '#12e78c'
                    }];
                    TIMECHART('ech_5', null, series, ['个'], oper);

                },
                load_ech_6(data) {
                    console.log(data)
                    let oper = {
                        showToolbox: false,
                        format: 'MM-dd',
                        yAxis: [{
                            type: "value",
                            name: "次",
                            nameTextStyle: {color: "#058cff"},
                            splitLine: {show: false},
                            axisLabel: {textStyle: {color: "#058cff"}},
                        }
                        ]
                    };
                    let series = [
                        {name: 'AI探测次数', type: 'line', data: data['all'] || [], unit: '次', color: '#01C2F9'},
                        {name: 'AI控制次数', type: 'line', data: data['isctl'] || [], unit: '次', color: '#00FFE3'},
                        {name: 'AI学习数', type: 'line', data: data['xx'] || [], unit: '次', color: '#FF1493'},
                    ];
                    DEFCHART('ech_6', null, series, ['次', '次', '次', '元/kW·h'], oper);
                }


            },
            destroyed() {
                // 销毁监听
                if (this.socket) {
                    this.socket.onclose = this.close
                }
                if (this.timer) {
                    clearInterval(this.timer)
                }

            }
        })
    ;

</script>

</html>